<template>
  <button @click="show = !show">开关{{ show }}</button>
  <div v-if="show" v-custom-directive="{ background: 'green' }"></div>
</template>

<script setup lang="ts">
// 局部指令
// 限制：必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用
import { ref } from 'vue';
import type { Directive, DirectiveBinding } from 'vue'; // 引入类型
const show = ref<boolean>(true);
// Directive 类型
const vCustomDirective: Directive = {
  created: () => {
    console.log('created初始化====>');
  },
  beforeMount(...args: Array<any>) {
    // 在元素上做些操作
    console.log('beforeMount初始化一次=======>');
  },
  mounted(el: any, dir: DirectiveBinding<any>) {
    el.style.background = dir.value.background;
    console.log('mounted初始化========>');
  },
  beforeUpdate() {
    console.log('更新之前');
  },
  updated() {
    console.log('更新结束');
  },
  beforeUnmount(...args: Array<any>) {
    console.log(args);
    console.log('======>卸载之前');
  },
  unmounted(...args: Array<any>) {
    console.log(args);
    console.log('======>卸载完成');
  }
};
</script>

<style lang="scss" scoped>
div {
  width: 200px;
  height: 200px;
}
</style>
